<template>
  <view
    class="content"
    :style="{ height: setHeight + 'px', background: '#fff' }"
  >
    <view class="wrap">
      <view class="title">
        <view class="empty"></view>
        <view class="subTitle">企业零工市场招聘</view>
      </view>
      <view class="box">
        <u-form :model="form" ref="uForm" :errorType="errorType">
          <u-form-item
            :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }"
            left-icon="star-fill"
            :label-style="{ fontSize: '13px', color: '#666666' }"
            label-width="172"
            label="企业名称："
            prop="enterpriseName"
          >
            <u-input
              border
              v-model="form.enterpriseName"
              placeholder="请输入企业名称"
              placeholder-style="font-size:26rpx;"
              maxlength="32"
            />
          </u-form-item>
          <u-form-item
            :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }"
            left-icon="star-fill"
            :label-style="{ fontSize: '13px', color: '#666666' }"
            label-width="172"
            label="信用代码："
            prop="orgCode"
          >
            <u-input
              border
              v-model="form.orgCode"
              placeholder="请输入企业信用代码"
              placeholder-style="font-size:26rpx;"
              maxlength="32"
            />
          </u-form-item>
          <u-form-item
            :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }"
            left-icon="star-fill"
            :label-style="{ fontSize: '13px', color: '#666666' }"
            label-width="172"
            label="联系人："
            prop="linkName"
          >
            <u-input
              border
              v-model="form.linkName"
              placeholder="请输入联系人姓名"
              placeholder-style="font-size:26rpx;"
              maxlength="15"
            />
          </u-form-item>
          <u-form-item
            :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }"
            left-icon="star-fill"
            :label-style="{ fontSize: '13px', color: '#666666' }"
            label-width="172"
            label="联系电话："
            prop="linkPhone"
          >
            <u-input
              border
              v-model="form.linkPhone"
              placeholder="请输入联系电话"
              placeholder-style="font-size:26rpx;"
            />
          </u-form-item>
          <u-form-item
            :label-style="{ fontSize: '13px', color: '#666666' }"
            label-width="172"
            label="企业类型："
            prop="enterpriseType"
          >
            <u-input
              border
              :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }"
              left-icon="star-fill"
              type="select"
              :select-open="companyTypeSelectShow"
              v-model="form.enterpriseType"
              placeholder="请选择企业类型"
              placeholder-style="font-size:26rpx;"
              @click="companyTypeSelectShow = true"
            >
            </u-input>
          </u-form-item>
          <u-form-item
            :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }"
            left-icon="star-fill"
            :label-style="{ fontSize: '13px', color: '#666666' }"
            label-width="172"
            label="行业类型："
            prop="industry"
          >
            <u-input
              border
              :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }"
              left-icon="star-fill"
              type="select"
              :select-open="industryTypeSelectShow"
              v-model="form.industry"
              placeholder="请选择行业类型"
              placeholder-style="font-size:26rpx;"
              @click="industryTypeSelectShow = true"
            >
            </u-input>
          </u-form-item>
          <u-form-item
            :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }"
            left-icon="star-fill"
            :label-style="{ fontSize: '13px', color: '#666666' }"
            label-width="172"
            label="招聘开始："
            prop="startTime"
          >
            <u-input
              border
              v-model="form.startTime"
              disabled
              placeholder="请选择"
              placeholder-style="font-size:26rpx;"
              type="text"
              @click="periodValidityShow = true"
            />
          </u-form-item>
          <u-form-item
            :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }"
            left-icon="star-fill"
            :label-style="{ fontSize: '13px', color: '#666666' }"
            label-width="172"
            label="招聘结束："
            prop="endTime"
          >
            <u-input
              border
              v-model="form.endTime"
              disabled
              placeholder="请选择"
              placeholder-style="font-size:26rpx;"
              type="text"
              @click="periodValidityEndShow = true"
            />
          </u-form-item>
          <u-form-item
            :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }"
            left-icon="star-fill"
            :label-style="{ fontSize: '13px', color: '#666666' }"
            label-width="172"
            label="招聘职位："
            prop="positionInfoList"
          >
            <view class="inputBg">
              <view
                class="inputItem"
                v-for="(item, index) in form.positionInfoList"
                :key="index"
              >
                <view style="width: 156rpx">
                  <u-input
                    border
                    :leftIconStyle="{ color: '#f00' }"
                    :style="{
                      marginTop: index == 0 ? '0' : '16rpx',
                    }"
                    left-icon="star-fill"
                    type="select"
                    v-model="item.position"
                    placeholder="职位"
                    placeholder-style="font-size:26rpx;"
                    @click="positionSelectClick(index)"
                  />
                </view>
                <view style="width: 136rpx">
                  <u-input
                    border
                    :style="{
                      marginTop: index == 0 ? '0' : '16rpx',
                      marginLeft: '6rpx',
                      fontSize: '12rpx',
                    }"
                    v-model="item.salary"
                    :clearable="false"
                    placeholder="薪资 元"
                    placeholder-style="font-size:26rpx;"
                    @blur="clearNoNum(item.salary)"
                  />
                </view>
                <view style="width: 136rpx">
                  <u-input
                    border
                    :leftIconStyle="{ color: '#f00' }"
                    :style="{
                      marginLeft: '6rpx',
                      marginTop: index == 0 ? '0' : '16rpx',
                    }"
                    left-icon="star-fill"
                    type="select"
                    v-model="item.unit"
                    placeholder="单位"
                    placeholder-style="font-size:26rpx;"
                    @click="unitSelectClick(index)"
                  />
                </view>
                <view
                  :style="{
                    marginLeft: '12rpx',
                    marginTop: index == 0 ? '0' : '16rpx',
                  }"
                >
                  <u-checkbox
                    v-model="item.checked"
                    shape="circle"
                    width="100rpx"
                    label-size="24rpx"
                    >急聘</u-checkbox
                  >
                </view>
                <!-- <u-icon
                  name="plus-circle"
                  size="40"
                  style="margin-left: 2rpx"
                  v-show="index == 0"
                  @click="addInput()"
                ></u-icon>
                <u-icon
                  name="minus-circle"
                  size="40"
                  style="margin-left: 2rpx"
                  v-show="index != 0"
                  @click="delInput(index)"
                ></u-icon> -->
              </view>
            </view>
          </u-form-item>
           <u-form-item
            :label-style="{ fontSize: '14px', color: '#666666' }"
            label-width="175"
            label="职位描述："
            prop="positionDesc"
          >
            <u-input
              border
              type="textarea"
              placeholder="请输入职位描述"
              placeholder-style="font-size:26rpx;"
              v-model="form.positionDesc"
              maxlength="500"
              height="100"
            />
          </u-form-item>
          <u-form-item
            :label-style="{ fontSize: '13px', color: '#666666' }"
            label-width="172"
            label="企业介绍："
            prop="introduction"
          >
            <u-input
              border
              type="textarea"
              placeholder="请输入企业介绍"
              placeholder-style="font-size:26rpx;"
              v-model="form.introduction"
              maxlength="500"
              height="100"
            />
          </u-form-item>
          <view class="sumbitWrap">
            <view class="buttonBox">
              <u-button type="primary" @click="submit()">提交</u-button>
            </view>
          </view>
        </u-form>
      </view>
      <u-select
        mode="single-column"
        :list="companyTypeSelectList"
        v-model="companyTypeSelectShow"
        @confirm="selectCompanyTypeConfirm"
      ></u-select>
      <u-select
        mode="single-column"
        :list="industryTypeSelectList"
        v-model="industryTypeSelectShow"
        @confirm="selectIndustryTypeConfirm"
      ></u-select>
      <u-picker
        v-model="periodValidityShow"
        mode="time"
        @confirm="selectStartConfirm"
      ></u-picker>
      <u-picker
        v-model="periodValidityEndShow"
        mode="time"
        @confirm="selectEndConfirm"
      ></u-picker>
      <u-select
        mode="single-column"
        :list="positionSelectList"
        v-model="positionSelectShow"
        @confirm="selectPositionConfirm"
      ></u-select>
      <u-select
        mode="single-column"
        :list="unitSelectList"
        v-model="unitSelectShow"
        @confirm="selectUnitConfirm"
      ></u-select>
      <u-modal
        v-model="industryInputShow"
        :show-cancel-button="true"
        confirm-text="确定"
        title="输入行业类型"
        @cancel="cancelIndustry"
        @confirm="confirm"
      >
        <u-input
          v-model="form.industry"
          style="margin-left: 15%; width: 80%"
          placeholder="请输入"
        />
      </u-modal>
      <u-modal
        v-model="positionInputShow"
        :show-cancel-button="true"
        confirm-text="确定"
        title="输入职位"
        @cancel="cancelPostion"
        @confirm="confirm"
      >
        <u-input
          v-model="form.positionInfoList[positionIndex].position"
          style="margin-left: 15%; width: 80%"
          placeholder="请输入"
        />
      </u-modal>
    </view>
  </view>
</template>

<script>
import api from "@/common/utils/api"; //接口
import urlConfig from "@/common/utils/config";
import { removeEmoji } from "@/common/utils/index";
export default {
  data() {
    return {
      border: true,
      form: {
        enterpriseName: "",
        orgCode: "",
        industry: "",
        enterpriseType: "",
        introduction: "",
        // recruitDetails: "",
        endTime: "",
        startTime: "",
        linkName: "",
        linkPhone: "",
        positionInfoList: [
          {
            id: "0",
            position: "",
            salary: "",
            unit: "",
            checked: false,
            isUrgent: 0, // 1急聘 0非急聘
          },
        ],
        positionDesc:""
      },
      rules: {
        enterpriseName: [
          {
            required: true,
            message: "请输入企业名称",
            trigger: ["change", "blur"],
          },
        ],
        orgCode: [
          {
            required: true,
            message: "请输入信用代码",
            trigger: ["change", "blur"],
          },
        ],
        linkName: [
          {
            required: true,
            message: "请输入联系人姓名",
            trigger: ["change", "blur"],
          },
        ],
        linkPhone: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: ["change", "blur"],
          },
          // {
          //   validator: (rule, value, callback) => {
          //     return this.$u.test.mobile(value);
          //   },
          //   message: "请输入正确的手机号码",
          //   trigger: ["change", "blur"],
          // },
        ],
        industry: [
          {
            required: true,
            message: "请选择行业类型",
            trigger: ["change", "blur"],
          },
        ],
        startTime: [
          {
            required: true,
            message: "请输入开始时间",
            trigger: ["change", "blur"],
          },
        ],
        endTime: [
          {
            required: true,
            message: "请输入结束时间",
            trigger: ["change", "blur"],
          },
        ],
      },
      errorType: ["toast"],
      companyTypeSelectShow: false,
      companyTypeSelectList: [
        {
          value: "1",
          label: "民营",
        },
        {
          value: "2",
          label: "合资",
        },
        {
          value: "3",
          label: "独资",
        },
        {
          value: "4",
          label: "国有",
        },
        {
          value: "5",
          label: "私营",
        },
        {
          value: "6",
          label: "全民所有制",
        },
        {
          value: "7",
          label: "集体所有制",
        },
        {
          value: "8",
          label: "股份制",
        },
        {
          value: "9",
          label: "有限责任",
        },
      ],
      industryTypeSelectShow: false,
      industryTypeSelectList: [
        // {
        //   value: "1",
        //   label: "A农、林、牧、渔业",
        // },
        // {
        //   value: "2",
        //   label: "B采矿业",
        // },
        // {
        //   value: "3",
        //   label: "C制造业",
        // },
        // {
        //   value: "4",
        //   label: "D电力、热力、燃气及水生产和供应业",
        // },
        // {
        //   value: "5",
        //   label: "E建筑业",
        // },
        // {
        //   value: "6",
        //   label: "F批发和零售业",
        // },
        // {
        //   value: "7",
        //   label: "G交通运输、仓储和邮政业",
        // },
        // {
        //   value: "8",
        //   label: "H住宿和餐饮业",
        // },
        // {
        //   value: "9",
        //   label: "I信息传输、软件和信息技术服务业",
        // },
        // {
        //   value: "10",
        //   label: "J金融业",
        // },
        // {
        //   value: "11",
        //   label: "K房地产业",
        // },
        // {
        //   value: "12",
        //   label: "L租赁和商务服务业",
        // },
        // {
        //   value: "13",
        //   label: "M科学研究和技术服务业",
        // },
        // {
        //   value: "14",
        //   label: "N水利、环境和公共设施管理业",
        // },
        // {
        //   value: "15",
        //   label: "O居民服务、修理和其他服务业",
        // },
        // {
        //   value: "16",
        //   label: "P教育",
        // },
        // {
        //   value: "17",
        //   label: "Q卫生和社会工作",
        // },
        // {
        //   value: "18",
        //   label: "R文化、体育和娱乐业",
        // },
        // {
        //   value: "19",
        //   label: "S公共管理、社会保障和社会组织",
        // },
        // {
        //   value: "20",
        //   label: "T国际组织",
        // },
      ],
      industryInputShow: false,
      periodValidityShow: false,
      periodValidityEndShow: false,
      positionSelectShow: false,
      positionSelectList: [
        // {
        //   value: "1",
        //   label: "清洁工",
        // },
        // {
        //   value: "2",
        //   label: "保姆",
        // },
        // {
        //   value: "3",
        //   label: "保安",
        // },
        // {
        //   value: "4",
        //   label: "月嫂",
        // },
        // {
        //   value: "5",
        //   label: "技工",
        // },
        // {
        //   value: "6",
        //   label: "电工",
        // },
        // {
        //   value: "7",
        //   label: "钳工",
        // },
        // {
        //   value: "8",
        //   label: "机修工",
        // },
        // {
        //   value: "9",
        //   label: "钣金工",
        // },
        // {
        //   value: "10",
        //   label: "水工",
        // },
        // {
        //   value: "11",
        //   label: "木工",
        // },
        // {
        //   value: "12",
        //   label: "油漆工",
        // },
        // {
        //   value: "13",
        //   label: "包装工",
        // },
        // {
        //   value: "14",
        //   label: "切割技工",
        // },
        // {
        //   value: "15",
        //   label: "装卸",
        // },
        // {
        //   value: "16",
        //   label: "叉车工",
        // },
        // {
        //   value: "17",
        //   label: "铲工",
        // },
        // {
        //   value: "18",
        //   label: "理货员",
        // },
        // {
        //   value: "19",
        //   label: "收银员",
        // },
        // {
        //   value: "20",
        //   label: "导购员",
        // },
        // {
        //   value: "21",
        //   label: "促销员",
        // },
        // {
        //   value: "22",
        //   label: "其他",
        // },
      ],
      positionIndex: 0,
      positionInputShow: false,

      unitSelectShow: false,
      unitSelectList: [
        {
          value: "1",
          label: "天",
        },
        {
          value: "2",
          label: "小时",
        },
        {
          value: "3",
          label: "月",
        },
      ],
      unitIndex: 0,
    };
  },
  created() {
    //未登录拦截
    var loginRes = this.checkLogin();
    if (!loginRes) {
      return false;
    }
  },
  onLoad(item) {
    this.isDetail = item;
    if (!(JSON.stringify(this.isDetail) == "{}")) {
      this.form = { ...this.isDetail };
    }
    // 获取行业类型
    this.getIndustryList();
    // 获取招聘职位
    this.getPositionList();
  },
  mounted() {},
  computed: {
    setHeight() {
      try {
        const res = uni.getSystemInfoSync();
        return res.windowHeight; //屏幕高度
      } catch (e) {}
    },
  },
  methods: {
    getIndustryList() {
      api
        .findIndustryList()
        .then((res) => {
          if (res.success) {
            res.data.map((item) => {
              this.industryTypeSelectList.push({
                value: item.industryId,
                label: item.industryName,
              });
            });
            this.industryTypeSelectList.push({
              value: 99999999,
              label: "没找到，去输入",
            });
          }
        })
        .finally((e) => {});
    },
    getPositionList() {
      api
        .findPostionList()
        .then((res) => {
          if (res.success) {
            res.data.map((item) => {
              this.positionSelectList.push({
                value: item.positionId,
                label: item.positionName,
              });
            });
            this.positionSelectList.push({
              value: 99999999,
              label: "没找到，去输入",
            });
          }
        })
        .finally((e) => {});
    },
    clearNoNum(obj) {
      // if (obj) {
      //   if (obj == 0) {
      //     uni.showToast({
      //       title: "薪资不能为0",
      //       icon: "none",
      //     });
      //   } else if (obj < 0) {
      //     uni.showToast({
      //       title: "薪资不能小于0",
      //       icon: "none",
      //     });
      //   }
      // }
    },
    formatDate(time, cFormat = null) {
      const format = cFormat || "{y}-{m}-{d}";
      const date = new Date(time);
      const formatObj = {
        //年
        y: date.getFullYear(),
        //月
        m: date.getMonth() + 1,
        //日
        d: date.getDate(),
        //小时
        h: date.getHours(),
        //分钟
        i: date.getMinutes(),
        //秒
        s: date.getSeconds(),
        //星期
        a: date.getDay(),
      };
      const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
        const value = formatObj[key];
        // Note: getDay() returns 0 on Sunday
        if (key === "a") {
          return ["日", "一", "二", "三", "四", "五", "六"][value];
        }
        //padStart用于字符串头部补全，2个字符，如果不够前面补0
        return value.toString().padStart(2, "0");
      });
      return time_str;
    },

    // 选择企业类型回调
    selectCompanyTypeConfirm(e) {
      console.log(e);
      this.form.enterpriseType = e[0].label;
    },
    // 选择行业类型回调
    selectIndustryTypeConfirm(e) {
      // this.form.industry = e[0].label;
      if (e[0].value == 99999999) {
        this.industryInputShow = true;
        this.form.industry = "";
      } else {
        this.form.industry = e[0].label;
      }
    },
    cancelIndustry() {
      this.form.enterpriseIndustry = "";
    },
    confirm() {},
    //
    selectStartConfirm(e) {
      console.log(e);
      this.form.startTime = e.year + "-" + e.month + "-" + e.day;
    },
    selectEndConfirm(e) {
      this.form.endTime = e.year + "-" + e.month + "-" + e.day;
    },
    // 选择职位回调
    selectPositionConfirm(e) {
      // this.form.industry = e[0].label;
      // this.form.positionInfoList[this.positionIndex].position = e[0].label;
      if (e[0].value == 99999999) {
        this.positionInputShow = true;
        this.form.positionInfoList[this.positionIndex].position = "";
      } else {
        this.form.positionInfoList[this.positionIndex].position =
          e[0].label;
      }
    },
    cancelPostion() {
      this.form.positionInfoList[this.positionIndex].position = "";
    },
    // 选择单位回调
    selectUnitConfirm(e) {
      this.form.positionInfoList[this.unitIndex].unit = e[0].label;
    },
    positionSelectClick(index) {
      this.positionSelectShow = true;
      this.positionIndex = index;
    },
    unitSelectClick(index) {
      this.unitSelectShow = true;
      this.unitIndex = index;
    },
    addInput() {
      if (this.form.positionInfoList.length == 10) {
        uni.showToast({
          title: "最多10条",
          icon: "none",
        });
        return;
      }
      this.form.positionInfoList.push({
        id: new Date().getTime(),
        position: "",
        salary: "",
        unit: "",
        isUrgent: 0,
      });
    },
    delInput(index) {
      this.form.positionInfoList.splice(index, 1);
    },
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          if (!this.validPosition()) {
            return;
          }
          if (
            !removeEmoji(this.form.enterpriseName) ||
            !removeEmoji(this.form.orgCode) ||
            !removeEmoji(this.form.linkName) ||
            !removeEmoji(this.form.linkPhone)
          ) {
            uni.showToast({
              title: "不得输入emoji表情！",
              icon: "none",
            });
            return;
          }
          let cDate1 = this.formatDate(new Date());
          let cDate = new Date(cDate1);
          let sDate = new Date(this.form.startTime);
          let eDate = new Date(this.form.endTime);
          if (sDate < cDate) {
            uni.showToast({
              title: "开始时间不得小于当前时间！",
              icon: "none",
            });
            return;
          }
          if (eDate < sDate) {
            uni.showToast({
              title: "结束时间不得小于开始时间！",
              icon: "none",
            });
            return;
          }
          // this.form.recruitDetails = this.form.recruitDetails.slice(
          //   0,
          //   this.form.recruitDetails.length - 1
          // );
          this.form.positionInfoList.map((item) => {
            item.isUrgent = item.checked ? 1 : 0;
            // delete item.checked
          });
          let userInfo = uni.getStorageSync("userInfo");
          if (userInfo) this.form.openid = userInfo.openid;
          uni.showLoading({
            title: "加载中",
          });
          api
            .addOdd(this.form)
            .then((res) => {
              if (res.success) {
                uni.hideLoading();
                uni.showToast({
                  title: res.msg,
                  icon: "none",
                  mask: true,
                });
                setTimeout(function () {
                  uni.navigateBack();
                }, 1000);
              }
            })
            .finally((e) => {});
        }
      });
    },
    validPosition() {
      let result = true;
      this.form.positionInfoList.map((item) => {
        if (!item.position) {
          uni.showToast({
            title: "请选择职位！",
            icon: "none",
          });
          result = false;
        }
        if (!item.salary) {
          uni.showToast({
            title: "请输入薪资！",
            icon: "none",
          });
          result = false;
        }
        if (!item.unit) {
          uni.showToast({
            title: "请输入招聘天数！",
            icon: "none",
          });
          result = false;
        }
      });
      return result;
    },
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
};
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  font-size: 30rpx;
}

.wrap {
  padding: 16rpx;
}

.box {
  margin-top: 30rpx;
  /* padding: 10rpx 20rpx; */
  background: #f7f7f7;
  border-radius: 10rpx;
}

.inputBg {
  display: flex;
  flex-direction: column;
}
.inputItem {
  display: flex;
  flex-direction: row;
}

.title {
  display: flex;
  align-items: center;
  height: 44rpx;
}

.empty {
  width: 8rpx;
  height: 30rpx;
  background: #00be6e;
  border-radius: 4rpx;
  margin-right: 10rpx;
}

.subTitle {
  font-size: 32rpx;
  color: #212121;
}

.sumbitWrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 80rpx;
}

.buttonBox {
  /* width: 50%; */
  margin-top: 60rpx;
  width: 80%;
}

/deep/.uni-input-input {
  /* color: #fff !important; */
  font-size: 26rpx;
}

/deep/.u-checkbox__label {
  margin-right: 8rpx;
}
</style>
